<template>
    <div>
        <!-- 1.给按钮绑定点击事件  2.在事件处理函数中让count自增 -->
        <!-- v-on语法: v-on:事件名="事件处理函数" -->
        <p>您要购买的数量:{{count}}</p>
        <button v-on:click="addCount">点击加一</button>
        <!-- 在v-on指令绑定事件时,事件处理函数后加括号表示传参,不是调用 -->
        <button v-on:click="addFiveCount(5)">点击加五</button>
        <!-- v-on的简写@ -->
        <button @click="sub">点击减一</button>
    </div>
</template>

<script>
export default {
    name: 'VuecliDemoApp',

    data() {
        return {
            count:0
        };
    },

    mounted() {
        
    },

    methods: {
        addCount(){
            this.count++
        },
        addFiveCount(num){
            this.count+=num
        },
        sub(){
            this.count--
        }

    },
};
</script>

<style lang="scss" scoped>

</style>